<template>
  <el-table :data="tableData" style="width: 100%; line-height: 10px">
    <el-table-column prop="id" label="id" />
    <el-table-column prop="appcode" label="appcode" />
    <el-table-column prop="taskName" label="任务名" />
    <el-table-column prop="taskType" label="任务类型" />
    <el-table-column prop="taskType" label="任务描述" />
    <el-table-column label="操作" fixed="right" min-width="200px" header-align="center" align="right">
      <template #default="scope">
        <el-button size="default" type="info" @click="jumpTaskDetailPage(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button size="default" type="danger">
          删除
        </el-button>
        <el-button size="default" type="success">
          执行一次
        </el-button>
        <label style="margin-left: 10px; margin-right: 10px;">
          任务状态：
          <el-switch v-model="scope.row.taskState"/>
        </label>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="1000" style="margin: 10px" />

</template>

<script setup>
import {useRouter} from 'vue-router';
const router = useRouter();

const tableData = [
  {
    id: 1,
    appcode: 'appcode1',
    taskName: 'taskN试试生生世世生生世世生生世世生生世世生生世世生生世世ame1',
    taskState: true
  },
  {
    id: 2,
    appcode: 'appcode2',
    taskName: 'taskName2',
    taskState: false
  }
];

const jumpTaskDetailPage = (taskId) => {
  router.push('TaskDetail?taskId=' + taskId);
  router.currentRoute.value.path = 'TaskDetail?taskId=' + taskId;
};
</script>
